import { ArticleInfo } from "@/type";
import Image from "next/image";
import GotoDedail from "@/components/GotoDedail";

interface Props {
  articleList: ArticleInfo[];
}

export default function ArticleList({ articleList }: Props) {
  return (
    <div className="w-[calc(100% - 8)] text-base md:text-lg mx-2 md:mx-0">
      {articleList.map((item, i) => (
        <div
          key={i}
          className="relative mb-4 md:mb-7 p-2 md:p-4 rounded-lg bg-primary-card shadow-xl slide-in-blurred-left"
          style={{
            animationDelay: `${i * 200}ms`,
            animationFillMode: "both",
          }}
        >
          <div className="md:flex md:justify-between">
            <div className="mb-2 md:mb-0">
              <div className="text-xl md:text-2xl font-medium">
                <span className="align-middle md:mr-8">{item.title}</span>
                <span className="align-middle">
                  {!!item.top_up && <span className="mr-1">🔝</span>}
                  {!!item.popular && <span>🔥</span>}
                </span>
              </div>
              <article
                className="min-h-[50px] text-stone-400 text-base md:text-xl indent-4 md:indent-10 line-clamp-4 hyphens-auto"
                lang="de"
              >
                {item.synopsis}
              </article>
            </div>

            <div className="relative w-[200px] md:w-80 h-28 md:h-48 overflow-hidden rounded-lg mx-2">
              {item.cover_img_url && (
                <Image
                  src={item.cover_img_url}
                  alt="ReindeerのRoom article image"
                  fill
                  loading="lazy"
                  quality={100}
                  sizes="100%"
                  style={{
                    objectFit: "cover",
                    objectPosition: "center",
                  }}
                />
              )}
            </div>
          </div>
          <footer className="mt-2 lg:pr-3 text-sm md:text-base italic cursor-default">
            <span className="mr-2 md:mr-4">🕐 数百纪元以前</span>
            <span className="mr-2 md:mr-4">👀 {item.page_view}</span>
            <span className="mr-2 md:mr-4">👍 {item.thumbs_up}</span>
            <span className="mr-2 md:mr-4">💬 {item.comment_num}</span>
            <span className="mr-2 md:mr-4">🏷️ Vue</span>
            <span className="mr-2 md:mr-4">🏷️ Vue</span>
            <span className="mr-2 md:mr-4">🏷️ Vue</span>
          </footer>
          <GotoDedail articleId={item.article_id} />
        </div>
      ))}
    </div>
  );
}
